<template>
  <div
    class="bg"
    ref="bg"
    id="bg"
  >
    <div v-watermark="{text:'健康险广东分公司',textColor:'rgba(0, 0, 0, 0.5)'}">
      <div class="text-img">
      <div class="text-img-box">
        <img
          src="@/assets/text.png"
          alt=""
        />
      </div>
    </div>
    <Clipper tType= '1' />
    <div class="form-box">
      <qrcode />
      <div class="fr" style="min-width:200px;">
        <div
          class="item"
         
        > 
          <span v-if="valdatatext">请输入用户名</span>
          <mt-field
            class="t1"
            placeholder="请输入姓名"
            style="width:50%margin-left:110px;"
            v-model="username"
          ></mt-field>
        </div>
        <div
          class="item" > 
          <span v-if="valdatatext">请输入用户名</span>
          <mt-field
            class="t1"
            placeholder="请输入电话"
            style="width:50%margin-left:110px;"
            v-model="telphone"
          ></mt-field>
        </div>
      </div>
    </div>
    <div class="table-img">
      <img
        src="@/assets/table.png"
        alt=""
      />
    </div>
    <btn v-if="showBtn" />
    <div
      class="layer"
      v-if="popupVisible"
      @click="popupVisible=false"
    >
      <div v-if="!showLoading">
        <div class="save">长按保存图片</div>
        <div class="htmlimg">
          <img :src="htmlurl"  alt="" />
          </div>
      </div>
      <div
        class="loading"
        v-if="showLoading"
      >
        <img
          src="@/assets/tip.gif"
          alt=""
        >
      </div>
    </div>
    </div>
     
  </div>
</template>

<script>
import qrcode from "./Qrcode";
import btn from "./Btn";
import html2canvas from "html2canvas";
// import Upload from './Upload'
import Clipper from './Clipper'
export default {
  components: { 
    qrcode,
   btn ,
  // Upload,
  Clipper
  },
  data() {
    return {
      htmlurl: "",
      username: "",
      telphone:'',
      email: "",
      password: "",
      popupVisible: false,
      showBtn: true,
      showLoading: false,
      valdatatext:false
     };
  },

  mounted() {
    this.bus.$on("creatImg", () => {
      // if(this.username===''){
      // this.valdatatext=true
      // }else if(){

      // }
      this.showBtn = false;
      this.showLoading = true;
      this.$nextTick(() => {
        html2canvas(document.getElementById("bg"), {
          backgroundColor: null,
          logging: false,
          allowTaint: true,
          useCORS: true
        })
          .then(canvas => {
            let dataURL = canvas
              .toDataURL("image/png")
              .replace("image/png", "image/octet-stream");
            this.htmlurl = dataURL;
            if (this.htmlurl !== "") {
              setTimeout(this.loading, 1000);
              this.popupVisible = true;
              this.showBtn = true;
              clearTimeout(this.loading);
            }
          })
          .catch();
      });
    });
  },
  methods: {
    loading() {
      this.showLoading = false;
    },
    getObjectURL(file) {
      let url = null;
      if (window.createObjectURL != undefined) {
        // basic
        url = window.createObjectURL(file);
      } else if (window.webkitURL != undefined) {
        // webkit or chrome
        url = window.webkitURL.createObjectURL(file);
      } else if (window.URL != undefined) {
        // mozilla(firefox)
        url = window.URL.createObjectURL(file);
      }
      return url;
    }
  }
};
</script>

<style scoped lang="less">

</style>
